<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span {
            /*高度*/
            height: 100px;
            /*宽度*/
            width: 100px;
            /*边框*/
            border: 1px solid red;
            /*转换为块级标签*/
            display: block;
        }

        div {
            /*高度*/
            height: 100px;
            /*宽度*/
            width: 100px;
            /*边框*/
            border: 1px solid red;
            /*转换行内标签*/
            display: inline;
        }
    </style>
</head>

<body>
    <!--需求：定义几个行内元素span，其中将一部分转换为块级标签，进行对比。
        注意：
            1.高度和宽度只适用于块级标签，不适用于行内标签
            2.display: block 块级标签
            3.display: inline 行内标签
            4.display: none 隐藏标签
     -->
    <span>span1</span>
    <span style="display: none">span2</span>
    <div>div1</div>
    <div>div2</div>
</body>

</html>